<template>
	<Layout :class="'bg-white p-2'">
		<Row :class="'m-1'">
			<Col class="pr-1" span="6">
			<Input class="w-100" v-model="clientName" placeholder="请输入客户名" :onkeyup="clientName = clientName.replace(/\s+/g,'')"/>
			</Col>
			<Col class="pr-1" span="6">
				<Input class="w-100" v-model="originalCode" placeholder="请输入支付编号" />
			</Col>
			<Col class="pr-1" span="6">
			<Select class="w-100" v-model="type" clearable placeholder="请选择押金状态">
				<Option v-for="stype in soucuntype" :value="stype.value" :key="stype.value">{{ stype.label }}</Option>
			</Select>
			</Col>
			<Button class="float-right" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
		</Row>
		<Layout class="bg-white">
			<Table border class="m-1" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="statu">
					<span v-if="row.statu=='REQ'">已申请退款</span>
					<span v-else-if="row.statu=='REJ'">已驳回退款</span>
					<span v-else-if="row.statu=='BCK'">已退还</span>
					<span v-else-if="row.statu=='APP'">已扣押</span>
				</template>
				<template slot-scope="{ row, index }" slot="amount">
					<span class="text-danger">￥{{util.parseMoney(row.amount / 100, 2)}}</span>
				</template>
				
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				soucuntype: [{
						value: 'REQ',
						label: '已申请退款'
					},
					{
						value: 'REJ',
						label: '已驳回退款'
					},
					{
						value: 'BCK',
						label: '已退还'
					},
					{
						value: 'APP',
						label: '已扣押'
					},
				],
				originalCode: "",
				clientName: "",
				storeId: "",
				type: "",
				tableInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "押金记录编号",
							key: "depositId",
							width: 150
						},
						{
							title: "支付平台支付编号",
							key: "originalCode",
							width: 210
						},
						{
							title: "客户名",
							key: "clientName",
							width: 100
						},
						{
							title: "门店",
							key: "storeName",
							width: 150
						},
						{
							title: "交易金额",
							slot: "amount",
							width: 150
						},
						{
							title: "状态",
							slot: 'statu',
						},
					],
					data: [],
				}
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},

			search: function() {
				this.http.get({
					url: "/client/deposit-record/list/v2",
					param: {
						current: this.tableInfo.currentPage,
						size: this.tableInfo.pageSize,
						clientName: this.clientName,
						originalCode: this.originalCode,
						storeId: this.storeId,
						statu: this.type
					}
				}).then(data => {
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				});
			},
			
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.search();
			}
		},
		created: function() {
			this.storeId = this.store.state.currentUser.store.storeId;
			this.init();
		},
	}
</script>

<style>

</style>
